<template>
  <el-card style="border-radius: 10px;">
    <template #header>
      <div style="display: flex;gap:10px;">
        <el-icon :size="40">
        <ele-Setting />
      </el-icon>
      <el-text style="font-size: 24px;">{{ $t('message.home.setting') }}</el-text>
      <el-input v-model="generationStore.params.seed" style="width: 300px;"></el-input>
      <el-text>{{ $t('message.home.randomSeed') }}</el-text>
      <el-switch v-model="generationStore.params.random_seed" inline-prompt :active-text="$t('message.common.yes')"
          :inactive-text="$t('message.common.no')"></el-switch>
      </div>

    </template>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4" style="margin-bottom: 10px;">
        <el-card shadow="hover">
          <div style="display: flex;gap: 5px">
            <el-select v-model="generationStore.params.sampler_index" placeholder="Select">
            <el-option
              v-for="sampler in samplerOptions"
              :key="sampler.value"
              :label="sampler.label"
              :value="sampler.value"
            />
          </el-select>
          <el-select v-model="generationStore.params.scheduler" placeholder="Select">
            <el-option
              v-for="scheduler in schedulerOptions"
              :key="scheduler.value"
              :label="scheduler.label"
              :value="scheduler.value"
            />
          </el-select>
          </div>
        </el-card>

      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4" style="margin-bottom: 10px;" v-if="false">
        <el-card shadow="hover">
                  <el-select v-model="generationStore.params.styles" placeholder="Select" multiple>
          <el-option label="Illustrious" value="Illustrious" />
          <el-option label="nami" value="nami" />
        </el-select>
        </el-card>

      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4" style="margin-bottom: 10px;">
        <el-card shadow="hover">
                  <div style="display: flex;">
          <el-slider v-model="generationStore.params.cfg_scale"  :min=1 :max=30 :marks="marks.cfgMarks" />
          <el-input v-model="generationStore.params.cfg_scale"
            style="width: 100px;margin-bottom: 5px;margin-left: 10px;" type="number" controls-position="right">
            <template #decrease-icon>
              <el-icon>
                <Minus />
              </el-icon>
            </template>
            <template #increase-icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-input>
        </div>
        </el-card>

      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4" style="margin-bottom: 10px;padding-left: 10px;">
        <el-card shadow="hover">
          <div style="display: flex;">
          <el-slider v-model="generationStore.params.width" :min=1024 :max=2048 :marks="marks.widthMarks" :step="8" />
          <el-input v-model="generationStore.params.width" style="width: 100px;margin-bottom: 5px;margin-left: 10px;"
            type="number" controls-position="right">
            <template #decrease-icon>
              <el-icon>
                <Minus />
              </el-icon>
            </template>
            <template #increase-icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-input>
        </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4" style="margin-bottom: 10px;padding-left: 10px;">
        <el-card shadow="hover">
          <div style="display: flex;">
          <el-slider v-model="generationStore.params.height" :min=1024 :max=2048 :marks="marks.heightMarks" :step="8" />
          <el-input v-model="generationStore.params.height" style="width: 100px;margin-bottom: 5px;margin-left: 10px;"
            type="number" controls-position="right">
            <template #decrease-icon>
              <el-icon>
                <Minus />
              </el-icon>
            </template>
            <template #increase-icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-input>
        </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4" style="margin-bottom: 20px;padding-left: 10px;">
        <el-card shadow="hover">
          <div style="display: flex;">
          <el-slider v-model="generationStore.params.batch_size" :marks="marks.sizeMarks" :min=1 :max=10 />
          <el-input v-model="generationStore.params.batch_size"
            style="width: 100px;margin-bottom: 5px;margin-left: 10px;" type="number" controls-position="right">
            <template #decrease-icon>
              <el-icon>
                <Minus />
              </el-icon>
            </template>
            <template #increase-icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-input>
        </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4" style="margin-bottom: 20px;padding-left: 10px;">
        <el-card shadow="hover">
          <div style="display: flex;">
          <el-slider v-model="generationStore.params.n_iter" :min=1 :max=10 :marks="marks.conuntMarks" />
          <el-input v-model="generationStore.params.n_iter" style="width: 100px;margin-bottom: 5px;margin-left: 10px;"
            type="number" controls-position="right">
            <template #decrease-icon>
              <el-icon>
                <Minus />
              </el-icon>
            </template>
            <template #increase-icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-input>
        </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="4" style="margin-bottom: 10px;">
        <el-switch v-model="generationStore.params.enable_hr" inline-prompt :active-text="$t('message.home.ActivateHrScale')"
          :inactive-text="$t('message.home.InActivateHrScale')"></el-switch>
      </el-col>
      <el-col v-show="generationStore.params.enable_hr" :xs="24" :sm="12" :md="12" :lg="12" :xl="4"
        style="margin-bottom: 10px;">
        <el-card shadow="hover">
          <div style="display: flex;">
          <el-slider v-model="generationStore.params.hr_scale" :min=1 :max=2 :step="0.1" />
          <el-input v-model="generationStore.params.hr_scale" style="width: 100px;margin-bottom: 5px;margin-left: 10px;"
            type="number" controls-position="right">
            <template #decrease-icon>
              <el-icon>
                <Minus />
              </el-icon>
            </template>
            <template #increase-icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-input>
        </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { useGenerationStore } from '@renderer/stores/useGenerationStore';
import { ref } from 'vue';

const generationStore = useGenerationStore()

const marks = {
  widthMarks: {
    1096: 'width',
    1536: '1536'
  },
  heightMarks: {
    1096: 'height',
    1536: '1536'
  },

  conuntMarks: {
    2: 'batch count',
  },

  sizeMarks: {
    2: 'batch size',
  },
  cfgMarks: {
    4: 'cfg scale',
  }
}

const samplerOptions = ref([
  { label: 'Euler a', value: 'Euler a' },
  { label: 'Euler', value: 'Euler' },
  { label: 'LMS', value: 'LMS' },
  { label: 'Heun', value: 'Heun' },
  { label: 'DPM2', value: 'DPM2' },
  { label: 'DPM2 a', value: 'DPM2 a' },
  { label: 'DPM++ 2S a', value: 'DPM++ 2S a' },
  { label: 'DPM++ 2M', value: 'DPM++ 2M' },
  { label: 'DPM++ SDE', value: 'DPM++ SDE' },
  { label: 'DPM++ 2M SDE', value: 'DPM++ 2M SDE' },
  { label: 'DPM fast', value: 'DPM fast' },
  { label: 'DPM adaptive', value: 'DPM adaptive' },
  { label: 'LMS Karras', value: 'LMS Karras' },
  { label: 'DPM2 Karras', value: 'DPM2 Karras' },
  { label: 'DPM2 a Karras', value: 'DPM2 a Karras' },
  { label: 'DPM++ 2S a Karras', value: 'DPM++ 2S a Karras' },
  { label: 'DPM++ 2M Karras', value: 'DPM++ 2M Karras' },
  { label: 'DPM++ SDE Karras', value: 'DPM++ SDE Karras' },
  { label: 'DPM++ 2M SDE Karras', value: 'DPM++ 2M SDE Karras' },
  { label: 'DDIM', value: 'DDIM' },
  { label: 'PLMS', value: 'PLMS' },
  { label: 'UniPC', value: 'UniPC' }
]);

const schedulerOptions = ref([
  { label: 'normal', value: 'normal' },
  { label: 'karras', value: 'karras' },
  { label: 'exponential', value: 'exponential' },
  { label: 'sgm_uniform', value: 'sgm_uniform' },
  { label: 'simple', value: 'simple' },
  { label: 'ddim_uniform', value: 'ddim_uniform' },
  { label: 'beta', value: 'beta' },
  { label: 'linear_quadratic', value: 'linear_quadratic' },
  { label: 'kl_optimal', value: 'kl_optimal' },
])

</script>

<style scoped>
.text-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.my-content) {
  font-weight: bold !important;
}

:deep(.my-label) {}

:deep(.collapse-custom .el-collapse-item__header) {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}

:deep(.collapse-custom .el-collapse-item__content) {
  width: 100% !important;
}

.center {
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: hidden;
}

:deep(.expand-table .el-table__expand-icon) {
  transition: transform rotate 0.5s ease-in-out !important;
}

:deep(.expand-table .el-table__expand-icon.el-table__expand-icon--expanded) {
  overflow: hidden !important;
  transform: rotate(90deg) !important;
}

:deep(.expand-table .el-table__expand-column .el-table__cell) {
  overflow: hidden !important;
}
</style>
